<template>
  <a-card>
    <ContentHeader />
    <div class="table-action">
      <!-- 搜索板块 -->
      <a-row class="row-item-search">
        <a-form class="search-form" layout="inline">
          <a-form-item label="昵称/手机号">
            <a-input placeholder="请输入昵称/手机号" v-model:value="from.search" />
          </a-form-item>
          <a-form-item label="会员等级">
            <a-select placeholder="请选择会员等级" v-model:value="from.grade_id">
              <a-select-option :value="0">全部等级</a-select-option>
              <a-select-option
                v-for="(item, index) in gradeList"
                :key="index"
                :value="item.grade_id"
                >{{ item.name }}</a-select-option
              >
            </a-select>
          </a-form-item>
          <a-form-item label="注册时间">
            <a-range-picker v-model:value="from.create_time" format="YYYY-MM-DD" />
          </a-form-item>
          <a-form-item class="search-btn">
            <a-button @click="queryTable">查询</a-button>
          </a-form-item>
        </a-form>
      </a-row>
    </div>
    <a-table
      rowKey="user_id"
      :columns="columns"
      :data-source="data.list"
      :pagination="{
        total: total,
        current: from.page,
        pageSize: pageSize,
      }"
      @change="handleTableChange"
    >
      <template #nick_name="value">
        <p class="p">{{ value.record.nick_name }}</p>
        <p class="p">{{ value.record.mobile }}</p>
      </template>
      <template #grade="value">
        <p class="p">{{ value.record.grade?value.record.grade.name:'---' }}</p>
      </template>
      <template #balance="value">
        <p class="p">￥ <a>{{ value.record.balance }}</a></p>
        <p class="p"> # <a>{{ value.record.points }}</a></p>
      </template>
      <template #status="value">
        <a-tag v-if="value.record.status" color="green"><check-circle-outlined/></a-tag>
        <a-tag v-if="!value.record.status" color="red"><close-circle-outlined
        /></a-tag>
      </template>
      <template #action="value">
        <a v-if="auth('recharge')" @click="recharge(value.record)">充值</a>
        <a-divider v-if="auth('updateGrade')" type="vertical" />
        <a v-if="auth('updateGrade')" @click="updateGrade(value.record)">等级</a>
        <a-divider v-if="auth('delete')" type="vertical" />
        <a v-if="auth('delete')" @click="deletefun(value.record)">删除</a>
      </template>
    </a-table>
    <Recharge ref="rechargeRef" @okCallback="okCallback" />
    <UpdateGrade ref="updateGradeRef" @okCallback="okCallback" />
  </a-card>
</template>
<script>
import { defineComponent, createVNode, reactive, toRefs } from "vue";
import { list,gradeList, deletes } from "@/api/user/List";
import { Modal } from "ant-design-vue";
import Recharge from "./module/Recharge";
import UpdateGrade from "./module/UpdateGrade";
import {
  ExclamationCircleOutlined,
  CheckCircleOutlined,
  CloseCircleOutlined,
} from "@ant-design/icons-vue";
import { notice, auth, refreshScrollTop } from "@/config";
export default defineComponent({
  components: {
    CheckCircleOutlined,
    CloseCircleOutlined,
    Recharge,
    UpdateGrade,
  },
  setup() {
    const columns = [
      {
        key: "user_id",
        title: "会员ID",
        dataIndex: "user_id",
      },
      {
        key: "nick_name",
        title: "昵称/手机号",
        dataIndex: "nick_name",
        slots: {
          customRender: "nick_name",
        },
      },

      {
        key: "grade",
        title: "会员等级",
        dataIndex: "grade",
        slots: {
          customRender: "grade",
        },
      },
      {
        key: "client_ource",
        title: "注册来源",
        dataIndex: "client_ource",
        slots: {
          customRender: "client_ource",
        },
      },
      {
        title: "余额/积分",
        dataIndex: "balance",
        scopedSlots: { customRender: "balance" },
        slots: {
          customRender: "balance",
        },
      },
      {
        title: "实际消费金额",
        dataIndex: "expend_money",
        scopedSlots: { customRender: "expend_money" },
      },
      {
        key: "status",
        title: "状态",
        dataIndex: "status",
        slots: {
          customRender: "status",
        },
      },
      {
        title: "创建时间",
        dataIndex: "create_time",
      },
      {
        key: "action",
        title: "操作",
        slots: {
          customRender: "action",
        },
      },
    ];

    // 定义动态数据
    const state = reactive({
      data: [],
      pageSize: 15,
      total: 0,
      // 会员等级列表
      gradeList: [],
      from: {
        page:1,
        search: "",
        grade_id:0,
        create_time:[],
      },
      rechargeRef:undefined,
      updateGradeRef:undefined,

    });
    // 获取会员等级
    gradeList().then((res)=>{
      state.gradeList = res.data;
    })

    // 获取数据
    const getTable = (where=[]) => {
      list(where).then((res) => {
        state.data = res.data;
        state.total = res.data.total;
        state.pageSize = res.data.listRows;
      });
    };
    getTable();

    const queryTable = () => {
      getTable(state.from);
    };

    // 分页查询
    const handleTableChange = (pag) => {
      state.from.page = pag.current;
      getTable(state.from);
      // 重置滚动高度
      refreshScrollTop();
    };

    // 删除菜单
    const deletefun = (item) => {
      Modal.confirm({
        title: () =>
          "你真的要删除(手机号:" +
          item.mobile +
          ",ID:" +
          item.user_id +
          ")这条记录吗?",
        icon: () => createVNode(ExclamationCircleOutlined),
        content: () => "注意：确定删除后不可恢复",
        okText: () => "确定删除",
        okType: "danger",
        cancelText: () => "取消操作",
        onOk() {
          deletes({ user_id: item.user_id }).then((res) => {
            getTable();
            notice(res.status == 200 ? "success" : "error", res.message);
          });
        },
        onCancel() {},
      });
    };
    // 充值账户余额/积分
    const recharge = (item) => {
      state.rechargeRef.show(item)
    }
    // 充值回调
    const okCallback = () => {
      getTable(state.from);
    };

    // 更新等级
    const updateGrade = (item) => {
      state.updateGradeRef.show(item,state.gradeList)
    }

    return {
      ...toRefs(state),
      columns,
      deletefun,
      handleTableChange,
      auth,
      getTable,
      queryTable,
      recharge,
      updateGrade,
      okCallback,
    };
  },
});
</script>
<style scoped>
.p{
  margin: 0;
}
.popover-button {
  margin-right: 5px;
  padding: 0 5px;
  font-size: 12px;
}
</style>
